<template>

     <!-- :visible.sync="dialogVisible"通过哪个变量控制弹窗的可见性 -->
    <el-dialog
      title="修改轮播图"
      :visible.sync="dialogVisible"
      width="50%">

      <div class="line_image">
          <div class="line_image_lable">
               <div class="image_label">产品图</div>
          </div>
          <!-- action上传地址  本地服务器地址-->
          <!-- https://jsonplaceholder.typicode.com/posts/ -->
          <!-- 可通过设置limit和on-exceed来限制上传文件的个数和定义超出限制时的行为 -->
          <el-upload
            class="upload-demo"
            :action="imageHost+'fileManager/upLoadFile'"
            :on-preview="handlePreview"
            :on-remove="handleRemoveProduct"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :on-success="handleSuccessProduct"
            :file-list="fileList">

            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
      </div>

      <div class="line_image_margin">
          <div class="line_image_lable">
               <div class="image_label">背景图</div>
          </div>

          <el-upload
            class="upload-demo"
            :action="imageHost+'fileManager/upLoadFile'"
            :on-preview="handlePreview"
            :on-remove="handleRemoveBackground"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="handleSuccessBackground">

            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
      </div>

      <!-- :model 将数据form赋值给表单内组件 -->
      <el-form ref="form" :model="form" label-width="80px" style="margin-top: 30px;">
        <el-form-item label="标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="标题英文">
          <el-input v-model="form.titleEn"></el-input>
        </el-form-item>

        <el-form-item label="描述">
          <el-input type="textarea" v-model="form.description"></el-input>
        </el-form-item>

        <el-form-item label="描述英文">
          <el-input type="textarea" v-model="form.descriptionEn"></el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>

    </el-dialog>


</template>

<script>
      // vue 怎么调用其他js文件的方法
      import { updateAboutUsBanner } from '@/api/system/about_us_banner'; // 引入特定的方法
      import { imageHost } from '@/api/ImageHost';
      export default{
         props: {
            // 定义一个名为 'message' 的 prop，并指定其类型为 String
            // 可以定义更多 prop...
            form:{
            }

         },

        data(){
          return{
            imageHost:'',
            dialogVisible:false,
            fileList : []
            // PickBean:{fileType:'1'}
          }
        },
        created(){
          this.imageHost=imageHost();

        },
        methods:{
          showDialog(){
            this.dialogVisible=true;
          },

          handleRemoveProduct(file, fileList) {
            console.log(file, fileList);
            // 移除图片地址
            this.form.productUrl='';

          },
          handlePreview(file) {
            console.log(file);

          },
          handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
          },
          beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
          },
           // 当文件上传成功时触发
          handleSuccessProduct(response, file, fileList) {
                // console.log('服务器响应:', response);
                // 包含当前上传源文件的所有内容
                // console.log('上传的文件:', file);
                // 包含源文件列表的所有内容
                // console.log('当前文件列表:', fileList);

                // 在这里可以对响应数据进行处理
                // 比如将服务器返回的数据保存到 Vuex 或者本地状态中
                // 将图片地址放入表单
                this.form.productUrl=response.data;

          },
          handleRemoveBackground(file, fileList){
              // 移除图片地址
              this.form.bgUrl='';
          },
          handleSuccessBackground(response, file, fileList){
              // 将图片地址放入表单
              this.form.bgUrl=response.data;
          },

          onSubmit(){
            updateAboutUsBanner(this.form).then(response => {
              console.log(response);
              this.dialogVisible=false;
              // this.$emit('custom-event', data); // 触发自定义事件，并传递数据给父组件
              this.$emit('custom-event');

            });


          }

        }


      }
</script>

<style scoped>
    .line_image{
        display: flex;
        flex-direction: row;

    }
    .line_image_margin{
        display: flex;
        flex-direction: row;
        margin-top: 30px;
    }
    .line_image_lable{
        width: 70px;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: end;
        align-items: center;
    }
    .upload-demo{
        margin-left: 15px;

    }
    .image_label{
        color: #666666;
    }

</style>
